<template>
    <div class="wrapper">
        <div v-if="detail">
            <LabelTitle title="用户基本信息" />
            <div class="item" v-for="item in detailConfig" :key="item?.value">
                <div class="label">{{item?.label}}</div>
                <div class="value">{{detail[item.value]}}</div>
            </div>
            <LabelTitle title="相关资质查看" style="margin-top:2rem" />
            <div class="item" v-for="item in certificateMessageConfig" :key="item?.value">
                <div class="label">{{item?.label}}</div>
                <div class="value">{{detail?.certificateMessage[item.value]?.fileName}}</div>
                <a :href="detail?.certificateMessage[item.value]?.url"
                    :download="detail?.certificateMessage[item.value]?.fileName">文件下载</a>
            </div>
            <div class="a" v-for="item in config" :key="item.value">
                <div class="label">{{item?.label}}</div>
                <div class="value">{{detail[item?.value]}}</div>
            </div>
            <div class="footer">
                <LabelTitle title="审核意见" style="margin-top:2rem" />
                <el-input v-model="reason" maxlength="100" placeholder="请输入审核意见" show-word-limit type="textarea" />
                <div class="b">
                    <el-button type="primary" @click="handleSubmit(1)" round>通过</el-button>
                    <el-button type="danger" @click="handleSubmit(0)" round>驳回</el-button>
                </div>
            </div>
        </div>
        <div v-else>
            <el-skeleton :rows=" 18" animated />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { useDetail } from "../../hooks/useDetail";
import LabelTitle from "../../../../components/LabelTitle/index.vue"
import { detailConfig, certificateMessageConfig, config } from "./detail"
import { ref } from "vue";
import { establishmentVerifyApi } from "../../../../api/userAudit";
import { responseCallback } from "../../../../utils";
const route = useRoute();
const router = useRouter();
const { params: { id } } = route;
const { detail } = useDetail(id);

const reason = ref("")

const handleSubmit = async (state) => {
    responseCallback({
        promise: establishmentVerifyApi({
            state,
            reason: reason.value,
            id
        }),
        cb: () => {
            router.push({
                name: "UserAuditList"
            })
        },
        successMessage: "提交成功"
    })

}


</script>

<style lang="less" scoped>
.wrapper {
    margin: 10px 15vw;
}

.item {
    display: flex;
    margin: 10px 0;
    padding: 10px 20px 10px;
    border-bottom: 1px dashed #ccc;
    color: #333;
    position: relative;

    .label {
        width: 200px;

    }

    .value {
        padding-right: 5vw;
    }

    a {
        position: absolute;
        right: 3vw;
    }
}

.a {
    display: flex;
    margin: 10px 0;
    padding: 10px 20px 10px;
    border-bottom: 1px dashed #ccc;
    color: #333;

    .label {
        width: 200px;

    }

    .value {
        padding-right: 5vw;
        flex: 1;
    }

}

.b {
    margin-top: 1em;
    display: flex;
}
</style>